

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('订单管理')" ></head>

<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){

        var data4Vue = {
            uri:'orders',
            beans: [],
            pagination:{}
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content;
                    });
                },
                showOrderItems: function(order){
                    var id = order.id;
                    $("#orderItemsTR"+id).show();
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                },
                deliveryOrder:function(order,e){
                    var url =  "deliveryOrder/"+order.id;
                    axios.put(url).then(function(response) {
                        $(e.target).hide();
                    });
                }
            }
        });

        Vue.filter('formatDateFilter', function (value, formatString) {
            if(null==value)
                return "";
            formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
            return moment(value).format(formatString);
        });
    });

</script>

<div id="workingArea" >
    <h1 class="label label-info" >订单管理</h1>
</div>
<div align="center">
<form action="">
    <style>
        .table11_6 table {
            width:100%;
            margin:15px 0;
            border:0;
        }
        .table11_6 th {
            background-color:#96C7ED;
            color:#000000
        }
        .table11_6,.table11_6 th,.table11_6 td {
            font-size:0.95em;
            text-align:center;
            padding:4px;
            border-collapse:collapse;
        }
        .table11_6 th,.table11_6 td {
            border: 1px solid #73b4e7;
            border-width:1px 0 1px 0;
            border:2px inset #ffffff;
        }
        .table11_6 tr {
            border: 1px solid #ffffff;
        }
        .table11_6 tr:nth-child(odd){
            background-color:#dcecf9;
        }
        .table11_6 tr:nth-child(even){
            background-color:#ffffff;
        }
    </style>
    <table class=table11_6 width="750">
        <tr>
            <th>oid</th>
            <th>用户昵称</th>
            <th>电影中文名</th>
            <th>影院名称</th>
            <th>订单时间</th>
            <th>操作</th>

        </tr>
        <tr th:each="orders:${orders}">
            <td th:text="${orders.oid}"></td>
            <td th:text="${orders.user_name}"></td>
            <td th:text="${orders.movie_name}"></td>
            <td th:text="${orders.cinema_name}"></td>
            <td th:text="${orders.order_time}"></td>
            <td>
                <p><a th:href="@{getOrdersByOid(oid=${orders.oid})}">编辑</a></p>
                <p><a th:href="@{'delOrdersByOid'+'?oid='+${orders.oid}}">删除</a></p>
            </td>
        </tr>
    </table>
</form>
</div>
<div align="center">
<p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
<a th:href="@{/admin_order_list}">首页</a>
<a th:href="@{/admin_order_list(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
<a th:href="@{/admin_order_list(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
<a th:href="@{/admin_order_list(pageNum=${pageInfo.pages})}">尾页</a>
</div>
</body>

</html>
